<!--
 * @Author: 涵崽
 * @Date: 2024-02-28 16:41:45
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2024-03-05 10:01:21
 * @Description: 微信：1045654
-->
<template>
  <el-button :style="buttonStyle">
    <slot />
  </el-button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'mini'
    },
    borderColor: {
      type: String,
      default: 'rgba(255,255,255,0)'
    },
    color: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {}
  },
  computed: {
    buttonStyle() {
      let background = ''
      switch (this.type) {
        case 'error':
          background = '#F56C6C'

          break
        case 'default':
          background = '#409EFF'

          break
        case 'success':
          background = '#67C23A'

          break
      }
      const fontSize =
        this.size === 'mini'
          ? '12px'
          : this.size === 'big'
            ? '16px'
            : this.size === 'nomal'
              ? '14px'
              : '14px'
      const borderColor = this.borderColor
      return {
        background,
        fontSize,
        borderColor,
        color: this.color ? this.color : '#fff'
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped></style>
